fix(react-form): use shallow equality in form.Subscribe to prevent unnecessary re-renders by mixelburg · Pull Request #2092 · TanStack/form

mixelburg · 2026-03-23T22:07:54Z

Summary

Fixes #2090

form.Subscribe was triggering re-renders on every store update when the selector returned an object or array. Since useStore defaults to Object.is reference equality, selectors that construct new objects/arrays on each call always appeared to have changed — even when the underlying data was identical.

Fix

Pass shallow from @tanstack/react-store as the compare function to useStore in LocalSubscribe. This is a one-line change: shallow equality avoids re-renders when the selector returns an object or array with the same primitive values.

-const data = useStore(form.store, selector)
+const data = useStore(form.store, selector, shallow)

@tanstack/react-store already exports shallow (and re-exports @tanstack/store), so no new dependencies are needed.

Testing

All 86 existing tests pass with no changes. The fix is intentionally minimal — the change in equality semantics only matters when a selector returns a new object/array reference on every call with the same contents, which is the exact scenario described in the issue.

Summary by CodeRabbit

Bug Fixes
- Improved form state change detection to ensure form components re-render correctly when data updates.

…necessary re-renders When the selector returns an object or array, useStore falls back to Object.is reference equality, causing re-renders on every store update even when the selected values haven't changed. Pass the shallow equality function from @tanstack/react-store as the compare argument to useStore so Subscribe only re-renders when the selected data actually changes structurally. Fixes TanStack#2090

coderabbitai · 2026-03-23T22:11:23Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 544f6088-bf2d-4ca1-8a8b-b1f24d6b2682

📥 Commits

Reviewing files that changed from the base of the PR and between e21cc01 and cc25192.

📒 Files selected for processing (1)

packages/react-form/src/useForm.tsx

📝 Walkthrough

Walkthrough

Updated the internal subscription mechanism in LocalSubscribe to use shallow equality comparison for state change detection. This prevents unnecessary re-renders when selectors return objects or arrays with unchanged content by passing shallow comparator to useStore().

Changes

Cohort / File(s)	Summary
Performance Fix `packages/react-form/src/useForm.tsx`	Added `shallow` import from `@tanstack/react-store` and passed it as the third parameter to `useStore(form.store, selector, shallow)` to enable shallow equality comparison for form state subscriptions, preventing redundant re-renders.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A shallow check, so quick and clean,
Stops renders that should never be seen,
When objects dance but stay the same,
Our form knows—no need for the blame!
Performance hops with gentle grace, ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description provides a clear summary with issue reference, root cause analysis, and testing confirmation, but lacks the PR description template sections (🎯 Changes, ✅ Checklist, 🚀 Release Impact).	Follow the repository's PR description template with proper sections (Changes, Checklist, Release Impact) and confirm changeset generation if applicable.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: using shallow equality in form.Subscribe to prevent unnecessary re-renders, which matches the core modification.
Linked Issues check	✅ Passed	The PR successfully implements all coding objectives from issue `#2090`: importing shallow from `@tanstack/react-store`, passing it as the third argument to useStore in LocalSubscribe, and verifying all 86 tests pass.
Out of Scope Changes check	✅ Passed	The changes are narrowly scoped to the required fix: only adding the shallow parameter to useStore in LocalSubscribe (+2/-2 lines), with no additional out-of-scope modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2026-03-26T12:01:35Z

View your CI Pipeline Execution ↗ for commit cc25192

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	1m 30s	View ↗
`nx run-many --target=build --exclude=examples/**`	✅ Succeeded	13s	View ↗

☁️ Nx Cloud last updated this comment at 2026-03-26 12:03:30 UTC

pkg-pr-new · 2026-03-26T12:02:17Z

More templates

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@2092

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@2092

@tanstack/form-devtools

npm i https://pkg.pr.new/@tanstack/form-devtools@2092

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@2092

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@2092

@tanstack/react-form-devtools

npm i https://pkg.pr.new/@tanstack/react-form-devtools@2092

@tanstack/react-form-nextjs

npm i https://pkg.pr.new/@tanstack/react-form-nextjs@2092

@tanstack/react-form-remix

npm i https://pkg.pr.new/@tanstack/react-form-remix@2092

@tanstack/react-form-start

npm i https://pkg.pr.new/@tanstack/react-form-start@2092

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@2092

@tanstack/solid-form-devtools

npm i https://pkg.pr.new/@tanstack/solid-form-devtools@2092

@tanstack/svelte-form

npm i https://pkg.pr.new/@tanstack/svelte-form@2092

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@2092

commit: cc25192

sentry · 2026-03-26T12:03:56Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 56.68%. Comparing base (6892ed0) to head (cc25192).
⚠️ Report is 158 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #2092       +/-   ##
===========================================
- Coverage   90.35%   56.68%   -33.68%     
===========================================
  Files          38       18       -20     
  Lines        1752      247     -1505     
  Branches      444       47      -397     
===========================================
- Hits         1583      140     -1443     
+ Misses        149       92       -57     
+ Partials       20       15        -5

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(react-form): use shallow equality in form.Subscribe to prevent unnecessary re-renders#2092

fix(react-form): use shallow equality in form.Subscribe to prevent unnecessary re-renders#2092
mixelburg wants to merge 1 commit intoTanStack:mainfrom
mixelburg:fix/form-subscribe-unnecessary-rerenders

mixelburg commented Mar 23, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Mar 23, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 inconclusive)

Uh oh!

nx-cloud bot commented Mar 26, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Mar 26, 2026

Uh oh!

sentry bot commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

mixelburg commented Mar 23, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Fix

Testing

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 inconclusive)

Uh oh!

nx-cloud bot commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Mar 26, 2026

Uh oh!

sentry bot commented Mar 26, 2026

Codecov Report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

mixelburg commented Mar 23, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 23, 2026 •

edited

Loading

nx-cloud bot commented Mar 26, 2026 •

edited

Loading